<!DOCTYPE html>
<html lang='en'>
<head>
<title>webclient</title>

<link rel="icon" href="static/favicon.svg">

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!--Add jquery -->
<script type="text/javascript" src="static/lib/jquery-3.5.1.min.js" crossorigin=""></script>


<!--Add leaflet -->
<link href="static/css/leaflet.css" rel="stylesheet" crossorigin=""/>
<script src="static/lib/leaflet-src.js" crossorigin=""></script>

<!-- Add location hash plugin -->
<script src='static/lib/leaflet-hash.js' crossorigin=""></script>

<!--Add draw plugin -->
<link href='static/css/leaflet.draw-src.css' rel='stylesheet' crossorigin=""/>
<script src='static/lib/leaflet.draw-src.js' crossorigin=""></script>

<!--Add modal plugin -->
<link href='static/css/leaflet.modal.css' rel='stylesheet' crossorigin=""/>
<script src='static/lib/L.Modal.js' crossorigin=""></script>

<!--Add sidebar plugin -->
<link href='static/css/L.Control.Sidebar.css' rel='stylesheet' crossorigin=""/>
<script src='static/lib/L.Control.Sidebar.js' crossorigin=""></script>

<!--Add easy-button plugin -->
<link href='static/css/easy-button.css' rel='stylesheet' crossorigin=""/>
<script src='static/lib/easy-button.js' crossorigin=""></script>

<!--Add Svg plugin -->
<script src='static/lib/leaflet.draw.svg.js' crossorigin=""></script>
<link href='static/css/leaflet.draw.svg.css' rel='stylesheet' crossorigin=""/>

<!--Add grid plugin -->
<script src='static/lib/L.Grid.js' crossorigin=""></script>


<!--Add tabulator code-->
<link href="static/css/tabulator/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="static/lib/tabulator/tabulator.min.js"></script>

<!--general and override css-->
<link href="static/css/layout.css" rel="stylesheet" type="text/css"></link>
<link href="static/css/fontawesome.css" rel="stylesheet" type="text/css"></link>

<!--Add socketio-->
<script type="text/javascript" src="static/lib/socket.io.js" crossorigin=""></script>

<!--main code-->
<script type="text/javascript" src="static/client.js" crossorigin=""></script>

<!-- tab specific code-->
<script type="text/javascript" src="static/client-schema.js" crossorigin=""></script>
<script type="text/javascript" src="static/client-gis.js" crossorigin=""></script>
<script type="text/javascript" src="static/client-alarms.js" crossorigin=""></script>
<script type="text/javascript" src="static/client-events.js" crossorigin=""></script>
<script type="text/javascript" src="static/client-datapoints.js" crossorigin=""></script>

</head>
<body>
  <div id="sidebar" style="color:black; display:none;" >
    <div id="info_panel" class="OperSidebar">
      <h1>Information</h1>
      <div id="info_items"></div>
      <div id="info_status">
        <h1>Status</h1> 
        Element <input id="status_element" readonly  value="?"  class="Btn OperBtn" style="width:400px;" onclick="open_graph($('#status_element').val())"><br><br>
        Value <input id="status_value" disabled="disabled" value="?"  class="Btn OperBtn" style="width:400px;">
      </div>
      <div id="info_control">
        <h1>Control</h1> 
        Element <input id="control_element" disabled="disabled"  value="?"  class="Btn OperBtn" style="width:400px;"><br><br>
        <input type="hidden" id="hidden_type" value="none">
        <div id="info_control_bool">
          Set to <br>
          <select id="control_value_bool" class="Btn OperBtn">
            <option value="0">Open</option>
            <option value="1">Close</option>
          </select>  <br><br>
          Action  <br>
          <div id="info_control_bool_SBO">
            <button onclick="select($('#control_element').val(),$('#control_value_bool').val())" class="Btn SelectBtn">select</button>
            <button onclick="cancel($('#control_element').val())" class="Btn CancelBtn">cancel</button>
          </div>
          <button onclick="operate($('#control_element').val(),$('#control_value_bool').val())" class="Btn OperBtn">operate</button>
        </div>
        <div id="info_control_doublepos">
          Set to <br>
          <select id="control_value_doublepos" class="Btn OperBtn">
            <option value="2">Open</option>
            <option value="1">Close</option>
          </select>  <br><br>
          Action <br>
          <div id="info_control_doublepos_SBO">
            <button onclick="select($('#control_element').val(),$('#control_value_doublepos').val())" class="Btn SelectBtn">select</button>
             <button onclick="cancel($('#control_element').val())" class="Btn CancelBtn">cancel</button>
          </div>
          <button onclick="operate($('#control_element').val(),$('#control_value_doublepos').val())" class="Btn OperBtn">operate</button>
        </div>
        <div id="info_control_int">
          Set to <br>
          <input type="number" id="control_value_int" value="-" class="Btn OperBtn"><br><br>
          Action <br>
          <div id="info_control_int_SBO">
            <button onclick="select($('#control_element').val(),$('#control_value_int').val())" class="Btn SelectBtn">select</button>
            <button onclick="cancel($('#control_element').val())" class="Btn CancelBtn">cancel</button>
          </div>
          <button onclick="operate($('#control_element').val(),$('#control_value_int').val())" class="Btn OperBtn">set</button>
        </div>
      </div>
    </div> 
    <div id="edit_panel">
      <h1>Properties</h1>
      <textarea style="width:380px;font-family: 'Lucida Console', 'Courier New', monospace;"
        class="" 
        id="options_field" 
        name="options_field" 
        data-gramm_editor="false" 
        spellcheck="false" 
        autofocus="" 
        wrap="off"
        placeholder="{&quot;options&quot;:&quot;🎉&quot;}" 
        rows="25"></textarea>
      <button id="sidebar-save">Save</button>
      <div id="edit_panel_error-message"></div>
    </div>
  </div>

  <div id="modal-1" class="modal-window">
    <h2>Rules</h2>
    <textarea style="width:580px;height:600px;"
      class="" 
      id="edit_rules" 
      name="edit_rules" 
      data-gramm_editor="false" 
      spellcheck="false" 
      autofocus="" 
      placeholder="{&quot;rules&quot;:&quot;🎉&quot;}" 
      rows="15"></textarea><br>
    <button class="modal-btn modal-save">Save</button>&nbsp;&nbsp;
    <button class="modal-btn modal-hide">Close</button>
    <div id="modal-1_error-message"></div>
  </div>

  <div id="modal-alarm" class="modal-window aPop">
    <h2>Alarm details<span class="aPop-close" title="close">&times;</span></h2>
    <hr>
    <div id="modal-alarm-time"></div>
    <div id="modal-alarm-severity"></div>
    <div id="modal-alarm-element"></div>
    <div id="modal-alarm-datapoint"></div>
    <div id="modal-alarm-value"></div>
    <div id="modal-alarm-message"></div>

    <br><b>Details:</b><br>
    <div id="modal-alarm-details"></div><br><br>
    <button class="modal-btn" id="modal-silence-alarm">Silence alarm</button>&nbsp;&nbsp;
    <button class="modal-btn" id="modal-ack-alarm">Acknowledge alarm</button>&nbsp;&nbsp;
    <button class="modal-btn" id="modal-close-alarm">Close alarm</button><br>
    <b>Comment:</b><br>
    <textarea style="width:100%;height:50px;"
      class="" 
      id="alarm_comment" 
      name="comment" 
      data-gramm_editor="true" 
      spellcheck="true" 
      autofocus="true" 
      placeholder="" 
      rows="2"></textarea>
  </div>

  <div id="modal-2" class="modal-window">
    <h2>dataprovider</h2>
    <textarea style="width:400px;height:100px;"
      class="" 
      id="edit_dataprovider" 
      name="edit_dataprovider" 
      data-gramm_editor="false" 
      spellcheck="false" 
      autofocus="" 
      placeholder="{&quot;dataprovider&quot;:&quot;🎉&quot;}" 
      rows="6"></textarea><br>
    <button class="modal-btn modal-save">Save</button>&nbsp;&nbsp;
    <button class="modal-btn modal-delete">Delete</button>&nbsp;&nbsp;
    <button class="modal-btn modal-hide">Close</button>
    <div id="modal-2_error-message"></div>
  </div>

  <input type="hidden" id="user_id>" name="user_id" value="{{ user_id }}">
  <input type="hidden" id="focus" name="focus" value="{{ focus }}">

  <div class='wrap'>
    <div class="column middle">
      <h2 class='h2 teal'>
        HMI | 
        <a href="http://localhost:3000" target="_blank" style="font-weight:underline;color: #26343e;">Graphs</a>
        <a href="https://localhost:9443" target="_blank" style="font-weight:underline;color: #26343e;text-align:right;float:right;">system & logs</a>
      </h2>	
      <a href="?focus=0" class="mapButton">schema</a>
      <a href="?focus=1" class="mapButton">gis</a>
      <a href="?focus=2" class="mapButton">alarms</a>
      <a href="?focus=3" class="mapButton">events</a>
      <a href="?focus=4" class="mapButton">dataproviders</a>
      
      <div class='content'>
        <div id="mmi_svg" style="display:block; height: 800px; "></div>
      </div>
    </div>
  </div>
  <div class="modal-fader"></div>
</body>
</html>

